import React, { Component } from 'react';
import './Index.scss'
import './List.css'
import './Mylist.css'

// 导入图片
import zhuan from '../img/zhuan.png'
// 导入小组件
import Input from './Input.jsx'
import Swipe from './Swipe';
import SecKill from './SecKill.jsx';
import Jinritejia from './Jinritejia'

// 导入方法
import {index_banner,index_nav,index_goodlist} from '../utils/api'

class index extends Component {
    constructor(props){
        super(props);
        this.state={
            pic:'',
            navlist:[],
            goodslist:[],
        }
    }
    render() {
        return (
            <div className='index'>
                <div className='logo'>
                    <div className='biaoti'>cdf会员购</div>
                    <div className='biaoyu'>足 不 出 户 & 尊 享 全 球 奢 品</div>
                </div>
                <Input></Input>
                <Swipe item={this.state.pic}></Swipe>
                {/* 1分抵1元 */}
                <SecKill></SecKill>
                {/* 推荐列表list */}
                <div className='list'>
                    {
                        // 列表渲染  使用js中的map函数
                        this.state.navlist.map((item,index)=>{
                            return (
                                <div className='cate' key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className='name'>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>
                {/* 闪购深夜专场 */}
                <div className='imgbox'>
                    <img src={zhuan} alt="" />
                </div>
                {/* 今日值得买 */}
                <Jinritejia></Jinritejia>
                {/* 商品推荐列表 */}
                <div className='goodslist'>
                    {
                        this.state.goodslist.map((item,index)=>{
                            return (
                                <div className='goods' key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className='name'>{item.name}</div>
                                    {
                                        item.activityTags.map((item,index)=>{
                                            return <span key={index}>{item}</span>
                                        })
                                    }
                                    <div className='price'>免税价￥{item.salesPrice.value}</div>
                                </div>
                            )
                        })
                    }
                </div>
                
            </div>
        );
    }
    // 组价挂载生命周期函数
    componentDidMount(){
        index_banner().then((req)=>{
            // console.log(req);
            var img = req.data.list[0].pic;
            // console.log(img)
            this.setState({
                 pic:img
            })
            return req
        })
        index_nav().then((req)=>{
            // console.log(req);
            var list = req.data.list;
            // console.log(list)
            this.setState({
                navlist:list,
            },)
        })
        index_goodlist().then((req)=>{
            console.log(req);
            var good = req.data.list;
            this.setState({
                goodslist:good,
            })
        })

    }

}

export default index;